<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>字幕组</title>
    <!-- Bootstrap -->
    <link href="__PUBLIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        body {
            font-size: 12px !important;
            font-family: 'Microsoft YaHei', "宋体", Geneva, sans-serif;
            line-height: 150%;
            color: #575757;
            margin: 0;
            padding: 0;
            background: #eeeeee;
        }
        .navbar{
            display: block;
            position: relative;

        }
        .top{
            top: 0px;
            margin: 0px;
        }
        .news{
           top: 0px;
            margin: 0px;
        }
        .label{
            float: right;
            color: #FFFFFF;
        }
        .carousel-inner {
            position: relative;
            width: 100%;
            overflow: hidden;
            height: 300px;
            display: block;
        }
        .t-title{
            border-radius: 5px;
            height: 30px;
            background-color: #333;
        }
        .t-name{
            margin: 0px;
            color: #FFFFFF;
            padding: 6px 18px;
        }
        .middle{
            top: 8px;
            position: relative;
        }



    </style>

</head>


<body>
<!------  导航条开始 ------->
<div class="bs-example bs-navbar-top-example" data-example-id="navbar-fixed-to-top">
    <nav class="navbar navbar-inverse" role="navigation">
        <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">字幕组</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">收藏</a></li>
                    <li><a href="#">字幕</a></li>
                    <li><a href="#">资讯</a></li>
                    <li><a href="#">影视库</a></li>
                    <li><a href="#">今日更新</a></li>
                    <li><a href="#">播出表</a></li>

                </ul>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="请输入搜索关键字">
                        </div>
                        <button type="submit" class="btn btn-default">查找</button>
                    </form>
                </div>
            </div><!-- /.navbar-collapse -->
            <iframe id="tmp_downloadhelper_iframe" style="display: none;"></iframe></div>
    </nav>
</div>

<div class="container col-md-12">
    <div class="top">
        <!-----24小时热门排行--------->
        <div class="news col-md-4" >
            <div class="t-title">
                <h4 class="t-name">24小时热门排行 <span class="label label-default">Hot</span></h4>
            </div>
            <div class="accordion" id="accordion2">
                <table class="table table-hover">
                    <tr>
                        <th>
                            <div class="accordion-group">
                                <div class="accordion-heading">

                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                                        第一名：
                                    </a>
                                </div>
                                <div id="collapseOne" class="accordion-body collapse in">
                                    <div class="accordion-inner">
                                        Anim pariatur cliche...
                                    </div>
                                </div>
                    </div>
                        </th>
                    </tr>
                    <tr>
                        <th>
                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                                        第二名：
                                    </a>
                                </div>
                                <div id="collapseTwo" class="accordion-body collapse">
                                    <div class="accordion-inner">
                                        Anim pariatur cliche...
                                    </div>
                                </div>
                            </div>
                        </th>
                    </tr>

                </table>
            </div>
        </div>


        <!----幻灯片------>
        <div class="huandeng col-md-4 " >
            <div id="myCarousel" class="carousel slide" >
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item"><img src="__PUBLIC__/img/1.jpg"></div>
                    <div class="item"><img src="__PUBLIC__/img/2.jpg"></div>
                    <div class="item"><img src="__PUBLIC__/img/3.jpg"></div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>
        </div>


        <!------今日播出------->
            <div class="news col-md-4" data-example-id="hoverable-table">
                <div class="t-title">
                    <h4 class="t-name">今日播出 <span class="label label-default">More</span></h4>
                </div>
                <table class="table table-hover">
                    <tr>
                        <th>1</th>
                    </tr>

                    <tbody>
                    <tr>
                        <th scope="row">2</th>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                    </tr>
                    <tr>
                        <th scope="row">4</th>
                    </tr>
                    </tbody>
                </table>
            </div>
    </div>
    <!-----中部----->
    <div class="middle">
        <!------新闻资讯------->
        <div class="news col-md-6" data-example-id="hoverable-table">
            <div class="t-title">
                <h4 class="t-name">新闻资讯 <span class="label label-default">More</span></h4>
            </div>
            <table class="table table-hover">
                <tr>
                    <th>1</th>
                </tr>

                <tbody>
                <tr>
                    <th scope="row">2</th>
                </tr>
                <tr>
                    <th scope="row">3</th>
                </tr>
                <tr>
                    <th scope="row">4</th>
                </tr>
                </tbody>
            </table>
        </div>
        <!------最新影评------->
        <div class="news col-md-6" data-example-id="hoverable-table">
            <div class="t-title">
                <h4 class="t-name">最新影评 <span class="label label-default">More</span></h4>
            </div>
            <table class="table table-hover">
                <tr>
                    <th>1</th>
                </tr>

                <tbody>
                <tr>
                    <th scope="row">2</th>
                </tr>
                <tr>
                    <th scope="row">3</th>
                </tr>
                <tr>
                    <th scope="row">4</th>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-----最新发布------>
    <div class="news col-md-12" data-example-id="simple-thumbnails">
        <div class="t-title">
            <h4 class="t-name">最新发布 <span class="label label-default">More</span></h4>
        </div>
        <div class="row">
            <div class="col-xs-2 col-md-2">
                <a href="#" class="thumbnail">
                    <img data-src="holder.js/100%x180" alt="最新发布" style="height: 140px; width: 100%; display: block;" src="" data-holder-rendered="true">
                </a>
                <div class="caption">
                    <h5>Thumbnail label</h5>
                    <p>...</p>
                </div>
            </div>
            <div class="col-xs-2 col-md-2">
                <a href="#" class="thumbnail">
                    <img data-src="holder.js/100%x180" alt="最新发布" style="height: 140px; width: 100%; display: block;" src="" data-holder-rendered="true">
                </a>
            </div>
            <div class="col-xs-2 col-md-2">
                <a href="#" class="thumbnail">
                    <img data-src="holder.js/100%x180" alt="最新发布" style="height: 140px; width: 100%; display: block;" src="" data-holder-rendered="true">
                </a>
            </div>
            <div class="col-xs-2 col-md-2">
                <a href="#" class="thumbnail">
                    <img data-src="holder.js/100%x180" alt="最新发布" style="height: 140px; width: 100%; display: block;" src="" data-holder-rendered="true">
                </a>
            </div>
            <div class="col-xs-2 col-md-2">
                <a href="#" class="thumbnail">
                    <img data-src="holder.js/100%x180" alt="最新发布" style="height: 140px; width: 100%; display: block;" src="" data-holder-rendered="true">
                </a>
            </div>
            <div class="col-xs-2 col-md-2">
                <a href="#" class="thumbnail">
                    <img data-src="holder.js/100%x180" alt="最新发布" style="height: 140px; width: 100%; display: block;" src="" data-holder-rendered="true">
                </a>
            </div>
        </div>
    </div>

    <!-----底部------>
    <div class="footer">

            <div class="news col-md-12 ">
                <div class="t-title">
                    <h4 class="t-name">友情链接 </h4>
                </div>
                <div class="panel-body">
                    <span class="col-md-2"><a href="http://www.subhd.com" >Sub HD字幕站</a> </span>
                    <span class="col-md-2"><a href="http://www.2tu.cc">迅播影院</a></span>
                    <span class="col-md-2"><a href="http://www.mp4ba.com">MP4吧</a></span>
                    <span class="col-md-2"><a href="http://www.letv.com">乐视视频</a></span>
                    <span class="col-md-2"><a href="http://www.youku.com">优酷网</a></span>
                    <span class="col-md-2"><a href="http://www.pptv.com">PPTV</a></span>
                </div>
           </div>

    </div>
</div>


<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="__PUBLIC__/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="__PUBLIC__/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">

</script>
</body>
</html>